<template>
  <main class="content-child">
    <h2>button组件</h2>
    <right
      class="right_component" :data="data"></right>
  </main>
</template>
<script>
import Right from "../components/Right";
export default {
  name: "Buttons",
  components: {
    Right,
  },
  data() {
    return {
      msg: [
        {
          name: "123",
        },
      ],
      data: [
        {
          name: "样式一",
          time: "0.2",
          img: "../../static/images/button/1.png",
          code: `
          <button ion-button color="light">Light</button>
          <button ion-button>Default</button>
          <button ion-button color="secondary">Secondary</button>
          <button ion-button color="danger">Danger</button>
          <button ion-button color="dark">Dark</button>`,
        },
        {
          name: "样式二",
          time: "0.2",
          img: "../../static/images/button/2.png",
          code: `
          <button ion-button color="light">Light</button>
          <button ion-button>Default</button>
          <button ion-button color="secondary">Secondary</button>
          <button ion-button color="danger">Danger</button>
          <button ion-button color="dark">Dark</button>`,
        },
        {
          name: "样式三",
          time: "0.2",
          img: "../../static/images/button/3.png",
          code: `
          <button ion-button color="light" round>Light Round</button>
          <button ion-button round>Primary Round</button>
          <button ion-button color="secondary" round>Secondary Round</button>
          <button ion-button color="danger" round>Danger Round</button>
          <button ion-button color="dark" round>Dark Round</button>
          `,
        },
        {
          name: "样式四",
          time: "0.2",
          img: "../../static/images/button/4.png",
          code: `
          <button ion-button block>Block Button</button>
          `,
        },
            {
          name: "样式五",
          time: "0.2",
          img: "../../static/images/button/5.png",
          code: `
            <!-- Float the icon left -->
            <button ion-button icon-start>
              <ion-icon name="home"></ion-icon>
              Left Icon
            </button>

            <!-- Float the icon right -->
            <button ion-button icon-end>
              Right Icon
              <ion-icon name="home"></ion-icon>
            </button>

            <!-- Only icon (no text) -->
            <button ion-button icon-only>
              <ion-icon name="home"></ion-icon>
            </button>
          `,
        },
      ],
    };
  },
};
</script>
<style scoped lang="less">
.content-child {
  text-align: left;
  width: 800px;
}
.right {
  padding-left: 1rem;
}
</style>
